<template>
  <div class="wrap">
    <div class="myheader">
      <div class="header">
        <div class="logo">
          <img src="@/assets/logo.png" alt="">
        </div>
      </div>
    </div>
    <div class="main">
      <div class="login">
        <div class="others">
          <div class="hello">註冊新用戶</div>
          <div class="other">
            <div>已有賬號，</div>
            <div @click="gologin">立即登錄</div>
          </div>
        </div>
        <div class="login_parent">
          <div class="top">
            <div class="new">姓*</div>
            <div class="phones">
              <input
                class="input-user"
                v-model="loginForm.surname"
                placeholder="姓"
                maxlength="16"
                type="text"
                autocomplete="off"
              />
            </div>
            <div class="new">名*</div>
            <div class="phones">
              <input
                class="input-user"
                v-model="loginForm.username"
                placeholder="名"
                maxlength="16"
                type="text"
                autocomplete="off"
              />
            </div>
          </div>
          <div class="totop">
            <div class="news">性別:</div>
            <div class="tophone">
              <el-radio v-model="loginForm.gender" label="2">女</el-radio>
              <el-radio v-model="loginForm.gender" label="1">男</el-radio>
            </div>
          </div>
          <div class="totops">
            <div class="tonews">出生日期:</div>
            <div class="block">
              <!-- <span class="demonstration">默認</span> -->
              <el-date-picker
                v-model="loginForm.birthday"
                type="date"
                format="MM-dd"
                value-format="yyyy-MM-dd"
                placeholder="選擇日期"
                :clearable='false'>
              </el-date-picker>
            </div>
          </div>
          <div class="tops">
            <div class="news">手機號碼*:</div>
            <!-- <el-select v-model="loginForm.sho_cate_name" placeholder="請選擇">
              <el-option
                v-for="item in list"
                :key="item.code"
                :label="item.label"
                :value="item.code">
              </el-option>
            </el-select> -->
            <!-- <select name="" v-model="loginForm.areaCode">
              <option value="">請選擇</option>
              <option v-for="(item,index) in list" :key="index" :value="item.code" style="background-image:url('https://dss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1906469856,4113625838&fm=26&gp=0.jpg');">{{item.label}}</option>
            </select> -->
            <el-select v-model="loginForm.areaCode" class="sele" filterable clearable  >
              <el-option v-for="(item,index) in list" :key="index" :label="item.label" :value="item.code" class="seletu">
                <!-- <img v-if="index == 1" src="./../../assets/china.png" style="width:40px">
                <img v-if="index == 0" src="./../../assets/china3.png" style="width:40px">
                <img v-if="index == 2" src="./../../assets/china2.png" style="width:40px">
                <img v-if="index == 3" src="./../../assets/china1.png" style="width:40px"> -->
                <span>{{ item.label }}</span>
              </el-option>
            </el-select>
            <div class="phoness">
              <input
                class="input-user"
                v-model="loginForm.mobile"
                placeholder="請輸入手機號碼"
                type="text"
                autocomplete="off"
              />
            </div>
          </div>
          <div class="tops">
            <div class="news">驗證碼*:</div>
            <div class="phone">
              <input
                class="input-user"
                v-model="loginForm.identifyingCode"
                placeholder="請輸入短信驗證碼"
                maxlength="16"
                autocomplete="off"
              />
            </div>
            <!-- <div class="get" @click="codetap()">獲取驗證碼</div> -->
            <div class="get" v-show="countshow" @click="codetap()">獲取驗證碼</div>
            <div class="get" v-show="!countshow">{{count}} s</div>
          </div>
          <div class="tops">
            <div class="news">郵箱:</div>
            <div class="phone">
              <input
                class="input-user"
                v-model="loginForm.email"
                placeholder="請輸入郵箱"
                type="text"
                autocomplete="off"
                @blur="animateWidth()" 
              />
            </div>
          </div>
          <div class="tops">
            <div class="news">推薦碼:</div>
            <div class="phone">
              <input
                class="input-user"
                v-model="loginForm.inviteCode"
                placeholder="請輸入推薦碼"
                maxlength="16"
                type="text"
                autocomplete="off"
              />
            </div>
          </div>
          <div class="tops">
            <div class="news">密碼*:</div>
            <div class="phone">
              <input
                class="input-user"
                v-model="loginForm.password"
                type="password"
                placeholder="請輸入密碼"
                maxlength="16"
                show-password
              />
            </div>
          </div>
          <div class="tops">
            <div class="news">確認密碼*:</div>
            <div class="phone">
              <input
                class="input-user"
                v-model="loginForm.passwords"
                type="password"
                placeholder="請輸入密碼"
                maxlength="16"
                show-password
              />
            </div>
          </div>
           <div class="forget">
             <el-checkbox v-model="acceptIs">是否接受推廣信息</el-checkbox>
          </div>
          <div class="forget">
             <el-checkbox v-model="aggree" style="color:#666666">我已閱讀並同意</el-checkbox>
            <div class="agree" @click="dia">《用戶服務協議和隱私政策》</div>
          </div>
          <div class="submit">
            <div @click="getuser">立即註冊</div>
          </div>
        </div>
      </div>
    </div>
    <el-dialog
      :title="mess.title"
      :visible.sync="dialogVisible"
      width="50%"
      :before-close="handleClose">
      <div v-html="mess.contont"></div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogVisible = false">確 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import {validatePhoneTwo,validateEMail,validatePassword,validateReferral,validateXing,validateMonth,validateDay} from '@/utils/validate';
import {register,getAreaCode,sendCode,userxie} from '@/api/login';
export default {
  name: 'regist',
  data () {
    return {
      list:[],
      // arr:[],
      hui:0,
      time:null,
      dialogVisible:false,
      value1: '',
      countshow: true,
      count: '60',
      timer: null,
      loginForm: {
        username: '',
        surname:'',
        password: '',
        passwords: '',
        email:'',
        identifyingCode:'',
        inviteCode:'',
        mobile:'',
        areaCode:'',
        birthday:'',
        gender:'',
        acceptIs:''
        // sho_cate_name: '',
      },
      radio:'1',
      mess:{},
      acceptIs:true,//接受推廣 1接受 0不接受
      aggree:true,
    }
  },
  mounted(){
    this.getcourse()
    userxie({id:15}).then( res=>{
       console.log(res)
       this.mess = res.data
    })
    if(this.$route.query.hui != undefined){
      this.hui = this.$route.query.hui
      this.loginForm.inviteCode = this.$route.query.hui
    }else{
      this.loginForm.inviteCode = ''
    }
  },
  methods: {
    animateWidth(){
      // if(this.loginForm.mobile=='' || !(/^1[3456789]\d{9}$/.test(this.loginForm.mobile))){
      //   this.$message('請輸入正確的手機號');
      //   return false
      // }else if(this.loginForm.identifyingCode==''){
      //   this.$message('請輸入驗證碼');
      //   return false
      // }else{
      //   console.log(this.loginForm.mobile,this.loginForm.identifyingCode)
      // } 
      // if(this.loginForm.email!=(/^\w[-\w.+]*@([A-Za-z0-9][-A-Za-z0-9]+\.)+[A-Za-z]{2,14}/)){
      //     this.$message('請輸入正確的郵箱格式');
      //   }else{
      //     return false
      //   }
    },
    handleClose(done) {
      done();
      // this.$confirm('确认关闭？')
      //   .then(_ => {
      //     done();
      //   })
      //   .catch(_ => {});
    },
    getuser(){     
        const reg = /^.{6,}$/
        if(this.loginForm.surname ==''){
          this.$message('請輸入姓');
        }else if(this.loginForm.username==''){
          this.$message('請輸入名');
        }else if(this.loginForm.areaCode ==''){
          this.$message('請選擇區號');
        }else if(this.loginForm.identifyingCode==''){
          this.$message('請輸入驗證碼');
        }else if(this.loginForm.password == ''|| this.loginForm.password == null || this.loginForm.password == undefined ){
          this.$message('密碼不能為空');
        }else if(this.loginForm.password != '' && !reg.test(this.loginForm.password)){
           this.$message('密碼不少於6位');
        }else if(this.loginForm.passwords == '' || this.loginForm.passwords == null || this.loginForm.passwords == undefined){
          this.$message('確認密碼不能為空');
        }else if(this.loginForm.passwords != this.loginForm.password){
          this.$message('兩次密碼輸入不壹致');
        }else if(this.aggree == false){
          this.$message('請您同意用戶服務協議和隱私政策');
        }else{
        this.acceptIs?this.loginForm.acceptIs = 1:this.loginForm.acceptIs = 0
        register({gender:this.loginForm.gender,birthday:this.loginForm.birthday,areaCode:this.loginForm.areaCode.split('+')[1],username:this.loginForm.username,surname:this.loginForm.surname,password:this.loginForm.password,email:this.loginForm.email,identifyingCode:this.loginForm.identifyingCode,inviteCode:this.loginForm.inviteCode,mobile:this.loginForm.mobile,acceptIs:this.loginForm.acceptIs}).then(response => {
          if (response.errno == 0) {
            this.$message({
              type: 'success',
              message: "註冊成功"
            })
            var that = this
            setTimeout(function(){
              that.$router.replace({ path: '/login' })
            },2000)        
          } else if(response.errno == -1){
            this.$message({
              type: 'error',
              message: response.errmsg
            })
          }else {
          this.$message({
            type: 'error',
            message: response.errmsg
          })
        }
      })
      .catch(failResponse => {})
      }
    },
    dia(){
      this.dialogVisible = true
    },
    codetap(){
      var that = this
        // const TIME_COUNT = 60;
        // if (!this.time) {
        //   this.count = TIME_COUNT;
        //   this.countshow = false;
        //   this.timer = setInterval(() => {
        //   if (this.count > 0 && this.count <= TIME_COUNT) {
        //     this.count--;
        //     } else {
        //     this.countshow = true;
        //     clearInterval(this.timer);
        //     this.timer = null;
        //     }
        //   }, 1000)
        //   }
        
       if(this.loginForm.areaCode ==''){
          this.$message('請選擇區號');
        }else{
          if(this.time)return
        sendCode({ tel:this.loginForm.mobile,areaCode:this.loginForm.areaCode.split('+')[1],type: 1}).then(response => {
          if (response.errno == 0) {
            this.countshow = false
            if(!this.time){
              this.time = setInterval(function(){
                    that.count = that.count - 1
                    if(that.count == 0){
                      clearInterval(that.time)
                      that.count = 60
                      that.countshow = true
                      that.time = null;
                      // that.loginForm.identifyingCode = ''
                    }
                }, 1000)
            }
            this.$message({
              type: 'success',
              message: response.errmsg
            })
          }else if(response.errno == -1){
            this.$message({
              type: 'error',
              message: response.errmsg
            })
          }else{
            this.$message({
              type: 'error',
              message: "系統錯誤"
            })
          }
        })
      }
    },
    getcourse(){
       getAreaCode({userId:0}).then(response => {
        if (response.errno == 0) {
          var array = []
          for(var i = 0;i<response.data.length;i++){
            response.data[i].label = response.data[i].area+'+'+response.data[i].code
            // this.code = response.data[i].code.split('+')[2]
            array.push(response.data[i])
          }
          this.list = array
        }
      })
      .catch(failResponse => {})
    },
    goforget(){
      this.$router.push({path:'/forget'})
    },
    gohome(){
      this.$router.push({path:'/home',query:{sta:1}})
    },
    goregist(){
      this.$router.push({path:'/regist'})
    },
    gologin(){
      this.$router.push({path:'/login'})
    }
  }
}
</script>
<style type="text/css" scoped>
.myheader{
  width: 100%;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
  background: #fff;
}
.header{
  width: 100%;
  height: 100px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
  /* margin-top: 15px; */
  /* margin-bottom:18px; */
  background: #be795a;
  padding: 0 150px;
}
.wrap{
  width: 100%;
  box-sizing: border-box;
  margin-bottom: 10px;
  background-color: #F5F5F5;
}
.logo img{
  width: 191px;
}
.hello{
  height: 42px;
  font-size: 25px;
  font-family: Microsoft YaHei;
  font-weight: bold;
  color: #333333;
  line-height: 42px;
}
.others{
  width: 75%;
  margin: 0 auto;
  display: flex;
  align-items: center;
  height: 60px;
  justify-content: space-between;
  font-size: 22px;
} 
.other{
  display: flex;
  font-size: 22px;
  height: 42px;
} 
.other>div:nth-child(1){
    height: 42px;
    font-size: 20px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #333333;
} 
.other>div:nth-child(2){  
    height: 42px;
    font-size: 20px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #BE9A67;
} 
  .main { 
    width: 100%;
    margin-top:10px;
    justify-content: space-around;
    background-color: #F5F5F5;
    /* background-size: cover;
    background-image: url("../../assets/loginBimg.png"); */
  }
  .login{
    width: 100%;
    background-color: #fff;
    align-items: center;
  }
  .login_parent {
    width: 40%;
    margin: 0 auto;
    background: #fff;
    color:rgba(0, 0, 0, 0.5);
    background-size: cover;
    border-radius: 15px;
  }
  .phone{
    width: 80%;
    display: block;
    padding:5px 10px;
    margin: 0 auto;
    color: #000;
    border:2px solid #666666;
  }
  .input{
      background: none !important;
  }
  .phone div{
    font-size: 25px;
    padding-left:2px;
  }
  .totop{
    width: 86%;
    display: flex;
    margin: 0 auto;
    margin-bottom:18px;
  }
  .tophone{
    font-size: 18px;
    padding:10px 30px;
  }
  .tophone>>>.el-radio__label {
    font-size: 18px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    color: #333333;
  }
  .totops>>>.el-input--prefix .el-input__inner {
    width: 238%;
    display: block;
    /* line-height:60px; */
    padding:12px 40px;
    font-size: 16px;
    color: #000;
    border:2px solid #666666;
    border-radius: 0;
}
  .phones{
    width: 164px;
    padding:5px 10px;
    color: #000;
    border:2px solid #666666;
  }
  .new{
    display: flex;
    align-items: center;
    font-size: 22px;
    padding-left:2px;
    color: #000;
  }
  .phoness{
    width: 50%;
    padding:5px 10px;
    color: #000;
    border:2px solid #666666;
  }
  .tonews{
    width: 19%;
    display: flex;
    align-items: center;
    font-size: 22px;
    padding-left:2px;
    color: #000;
  }
  .news{
    width: 20%;
    display: flex;
    align-items: center;
    font-size: 22px;
    padding-left:2px;
    color: #000;
  }
  .top{
    width: 86%;
    justify-content: space-between;
    display: flex;
    margin: 0 auto;
    margin-bottom:18px;
  }
  .totops{
    width: 86%;
    display: flex;
    margin: 0 auto;
    margin-bottom:18px;
  }
  .tops{
    position: relative;
    width: 86%;
    justify-content: space-between;
    display: flex;
    margin: 0 auto;
    margin-bottom:18px;
  }
  .get{
    position: absolute;
    right: 10px;
    height: 45px;
    line-height: 45px;
    font-size: 14px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #333333;
}
  .input-user {
    width: 100%;
    border: none;
    margin: 0 auto;
    outline: none;
    color: #000;
    font-size: 16px;
    background: #fff !important;
    height: 30px;
    line-height: 30px;
  }
  select{
    border-right: none; 
    outline: none;
    width: 30%;
    font-size: 18px;
    text-align: center;
    border-left:2px solid #666666;
    border-top:2px solid #666666;
    border-bottom:2px solid #666666;
  }
  .sele{
    border-right: none; 
    outline: none;
    width: 30%;
    font-size: 18px;
    text-align: center;
    border-left:2px solid #666666;
    border-top:2px solid #666666;
    border-bottom:2px solid #666666;
  }
  .wrap>>>.el-select>.el-input{
    height: 100%;
  }
  .wrap >>> .el-input--suffix .el-input__inner{
    height: 100%;
  }
  .seletu{
    display: flex;
    margin: 5px 0;
  }
  option{
    border-right: none; 
    outline: none;
    width: 20%;
    height: 60px;
    text-align: center;
    -webkit-appearance: none;
    -moz-appearance: none;
    padding-left:10px;
}
  .password{
    padding:20px 100px;
    margin: 0 auto;
    height: 80px;
}
  .input-password {
    width: 100%;
    margin: 0 auto;
    padding: 15px;
    border: none;
    outline: none;
    color: #000;
    font-size: 18px;
        border:2px solid #666666;
    height: 50px;
  }
  .submit{
    width: 88%;
    height: 100px;
    align-items: center;
    margin-left:23%;
    display: flex;
  }
  .submit>div:nth-child(1){
    width: 80%;
    height: 50px;
    line-height: 50px;
    text-align: center;
    background: #BE9A67;
    color: #fff;
    border-radius:10px;
    cursor:pointer;
    font-size: 25px;
  }
  .forget{
    width: 54%;
    height: 30px;
    display: flex;
    align-items: center;
    margin: 0 auto;
    font-size: 14px;
  }
  .agree{
    font-size: 8px;
    color: #BE9A67;
    cursor: pointer;
  }
  .forget>>>.el-checkbox__input.is-checked+.el-checkbox__label {
    color: #333;
}
</style>
